<!DOCTYPE html>
<html>
<head>
    <title>测一测，你的武功练到第几重！</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="./style.less">
    <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
</head>
<body>
<div class="layer">
    <div class="share-layer">

    </div>
    <div class="page-result" data-val="first">
        <div class="result-img"><img src="./img/res1.png"/></div>
        <div class="result-content">
            <p class="result-num">（<span></span>）分</p>
            <p>一支穿云箭，</p>
            <p>千军万马来相见！</p>
        </div>
        <a class="sharebtn"></a>
    </div>
    <div class="page-result" data-val="second">
        <div class="result-img"><img src="./img/res2.png?__sprite"/></div>
        <div class="result-content">
            <p class="result-num">（<span></span>）分</p>
            <p>原来你是都市"扫地僧"！</p>
            <p>失敬失敬！</p>
        </div>
        <a class="sharebtn"></a>
    </div>
    <div class="page-result" data-val="third">
        <div class="result-img"><img src="./img/res3.png?__sprite"/></div>
        <div class="result-content">
            <p class="result-num">（<span></span>）分</p>
            <p>胜负乃兵家常事，</p>
            <p>英雄请从头再来吧！</p>
        </div>
        <a class="sharebtn"></a>
    </div>
    <div class="page-layer page-layer-video page-layer-last">
        <div class="page-video">
            <video webkit-playsinline playsinline>
                <source src="./video/video4.mp4" type="video/mp4">
            </video>
            <div class="play-mask"><img src="./img/video4poster.png?__sprite"></div>
            <a class="page-play"></a>
        </div>
        <div class="page-title">视频题</div>
        <div class="page-question">
            <p>请问该电影片段</p>
            <p>演示的是哪种武术？</p>
            <div class="page-answer">
                <a class="err">A、洪拳</a>
                <a class="ok">B、咏春</a>
                <a class="err">C、罗汉拳</a>
            </div>
        </div>
    </div>
    <div class="page-layer">
    <div class="page-question">
        <div class="question-img"><img src="./img/img4.png" /></div>
        <p>请问图中这种武术被称为？</p>
        <div class="page-answer">
            <a class="ok">A、梅花桩拳</a>
            <a class="err">B、龙桩拳</a>
            <a class="err">C、虎桩拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-video">
    <div class="page-video">
        <video webkit-playsinline playsinline>
            <source src="./video/video3.mp4" type="video/mp4">
        </video>
        <div class="play-mask"><img src="./img/video3poster.png?__sprite"></div>
        <a class="page-play"></a>
    </div>
    <div class="page-title">视频题</div>
    <div class="page-question">
        <p>请问视频演示的</p>
        <p>是哪种武术？</p>
        <div class="page-answer">
            <a class="ok">A、螳螂拳</a>
            <a class="err">B、蛇拳</a>
            <a class="err">C、虎鹤双形拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-notimg">
    <div class="page-img"></div>
    <div class="page-question">
        <p>以下哪套武术由岳飞所创？</p>
        <p></p>
        <p></p>
        <div class="page-answer">
            <a class="ok">A、鹰爪拳</a>
            <a class="err">B、八门掌</a>
            <a class="err">C、五祖拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-notimg">
    <div class="page-question">
        <p>国家级非物质文化遗产</p>
        <p>遵循阴阳之理，以"引化合发"</p>
        <p>为主要技击过程的武术是？</p>
        <div class="page-answer">
            <a class="err">A、罗汉拳</a>
            <a class="err">B、醉拳</a>
            <a class="ok">C、太极拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-video">
    <div class="page-video">
        <video webkit-playsinline playsinline>
            <source src="./video/video2.mp4" type="video/mp4">
        </video>
        <div class="play-mask"><img src="./img/video2poster.png?__sprite"></div>
        <a class="page-play"></a>
    </div>
    <div class="page-title">视频题</div>
    <div class="page-question">
        <p>视频中由这位出生在</p>
        <p>广东顺德的国际功夫巨星</p>
        <p>开创的拳术叫什么？</p>
        <div class="page-answer">
            <a class="err">A、跆拳道</a>
            <a class="err">B、柔道</a>
            <a class="ok">C、截拳道</a>
        </div>
    </div>
</div>
<div class="page-layer">
    <div class="page-question">
        <div class="question-img"><img src="./img/img2.png?__sprite" /></div>
        <p>相传由陈抟老祖</p>
        <p>所创的拳术是？</p>
        <div class="page-answer">
            <a class="ok">A、六合八法拳</a>
            <a class="err">B、心意六合拳</a>
            <a class="err">C、奇门拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-video">
    <div class="page-video">
        <video webkit-playsinline playsinline>
            <source src="./video/video5.mp4" type="video/mp4">
        </video>
        <div class="play-mask"><img src="./img/video5poster.png?__sprite"></div>
        <a class="page-play"></a>
    </div>
    <div class="page-title">视频题</div>
    <div class="page-question">
        <p>视频中这位来自佛山的</p>
        <p>一代武术宗师</p>
        <p>是哪种拳派的大师？</p>
        <div class="page-answer">
            <a class="err">A、无影脚</a>
            <a class="ok">B、洪拳</a>
            <a class="err">C、八卦拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-notimg">
    <div class="page-question">
        <p>曾编"搞日杀敌大刀术</p>
        <p>教十九路军官</p>
        <p>抗击侵华晶寇的大师<em>林耀佳</em></p>
        <p>以哪种拳术著称？</p>
        <div class="page-answer">
            <a class="err">A、螳螂拳</a>
            <a class="ok">B、龙形拳</a>
            <a class="err">C、沾衣十八跌</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-video">
    <div class="page-video">
        <video webkit-playsinline playsinline>
            <source src="./video/video1.mp4" type="video/mp4">
        </video>
        <div class="test"></div>
        <div class="play-mask"><img src="./img/video1poster.png?__sprite"></div>
        <a class="page-play"></a>
    </div>
    <div class="page-title">视频题</div>
    <div class="page-question">
        <p>请问视频演示的</p>
        <p>是哪种武术的棍术？</p>
        <div class="page-answer">
            <a class="ok">A、白眉拳</a>
            <a class="err">B、南家拳</a>
            <a class="err">C、鹰爪拳</a>
        </div>
    </div>
</div>
<div class="page-layer page-layer-audio">
    <div class="page-img">
        <img src="./img/img3.png?__sprite" />
        <audio src="./audio/audio1.mp3"></audio>
        <a class="page-play pulse animated infinite"></a>
        <div class="play-tips">点击按钮播放</div>
    </div>
    <div class="page-title">音频题</div>
    <div class="page-question">
        <p>请通过声音判断</p>
        <p>这是哪种武术？</p>
        <div class="page-answer">
            <a class="err">A、太极拳</a>
            <a class="ok">B、咏春拳</a>
            <a class="err">C、罗汉道</a>
        </div>
    </div>
</div>
<div class="page-layer">
    <div class="page-question">
        <div class="question-img"><img src="./img/img1.png?__sprite" /></div>
        <p>请问图中这种</p>
        <p>集三家之长的武术被成为？</p>
        <div class="page-answer">
            <a class="ok">A、蔡李佛拳</a>
            <a class="err">B、大成拳</a>
            <a class="err">C、截拳道</a>
        </div>
    </div>
</div>
<div class="page-index" id="page-index">
    <div class="index-title"><img src="./img/index-title.png?__sprite" /></div>
    <div class="index-gif"><img src="./img/people.gif" /></div>
    <a class="index-btn pulse animated infinite"><img src="./img/index-btn.png?__sprite" /></a>
</div>
<div class="page-load">
    <div class="page-load-people">
        <img src="./img/load_people.gif" />
    </div>
    <!--<div class="page-loadbar"><span></span></div>-->
    <div class="page-loadnum"><span>0</span>%</div>
</div>

<div class="page-top">
    <em class="animated active">1</em>
    <em class="animated">2</em>
    <em class="animated">3</em>
    <em class="animated">4</em>
    <em class="animated">5</em>
    <em class="animated">6</em>
    <em class="animated">7</em>
    <em class="animated">8</em>
    <em class="animated">9</em>
    <em class="animated">10</em>
    <em class="animated">11</em>
    <em class="animated">12</em>
</div>
<a class="mark"></a>
<div class="page-clock">30S</div>
<div class="page-music">
    <audio id="music" src="./audio/music.mp3" loop="loop"></audio>
</div>
<span id="music_btn" class="music_btn"></span>
<div class="footer">
    <p>佛山素有中国武术之乡美名，</p>
    <p>多种拳派均在佛山传承至今。</p>
</div>

</div>
<script src="./node_modules/jquery/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript" src="http://helper.oeeee.com/api/Jssdk/config?domain=nd.oeeee.com"></script>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>